﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="ClientModel.aspx.cs" Inherits="ControlExplorer.C1Accordion.ClientObjectModel" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Accordion"
	TagPrefix="C1Accordion" %>
<%@ Register Src="../ClientLogger.ascx" TagName="ClientLogger" TagPrefix="ClientLogger" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<ClientLogger:ClientLogger ID="ClientLogger1" runat="server" />
	<C1Accordion:C1Accordion runat="server" 
		ID="C1Accordion1" 		
		OnClientSelectedIndexChanged="onClientSelectedIndexChanged">
		<Panes>
			<C1Accordion:C1AccordionPane ID="Accordion1Pane1" runat="server">
				<Header>
					步骤 1
				</Header>
				<Content>
					<h1>
						步骤 1</h1>
					Wijmo Accordion 控件提供了多个显示面板，每次显示其中一个面板的内容。用户选择其中一个面板时，
                    该面板的内容会自动展开，而其它面板内容会自动折叠，从而，实现自动地组织和优化用户界面的使用。
				</Content>
			</C1Accordion:C1AccordionPane>
			<C1Accordion:C1AccordionPane ID="Accordion1Pane2" runat="server">
				<Header>
					步骤 2
				</Header>
				<Content>
					<h1>
						步骤 2</h1>
					通过Wijmo Charts: Composite，只需一个图表就可以对复杂数据进行分析。相同数据使用不同的方式
                    进行显示，再将与之关联的数据进行叠加，便可预测数据的走势。
				</Content>
			</C1Accordion:C1AccordionPane>
			<C1Accordion:C1AccordionPane ID="Accordion1Pane3" runat="server">
				<Header>
					步骤 3
				</Header>
				<Content>
					<h1>
						步骤 3</h1>
					Wijmo Events Calendar支持用户添加、编辑和管理是由的预约。默认情况下，事件日历使用脱机数
                    据源，因此您可以轻松地添加到您的页面，而无需额外的配置此构件。
				</Content>
			</C1Accordion:C1AccordionPane>
			<C1Accordion:C1AccordionPane ID="Accordion1Pane4" runat="server" Expanded="True">
				<Header>
					步骤 4
				</Header>
				<Content>
					<h1>
						步骤 4</h1>
					Wijmo Accordion 控件提供了多个显示面板，每次显示其中一个面板的内容。用户选择其中一个面板时，
                    该面板的内容会自动展开，而其它面板内容会自动折叠，从而，实现自动地组织和优化用户界面的使用。
				</Content>
			</C1Accordion:C1AccordionPane>
		</Panes>
	</C1Accordion:C1Accordion>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
<p>此示例演示了如何使用客户端脚本修改accordion的行为或外观。</p>
<p>&nbsp;</p>
<p>示例中所使用的客户端选项列表:</p>
<ul>
<li><strong>requireOpenedPane</strong> - 确定点击标题时是否关闭当前打开的面板
	(关闭所有的accordion面板);</li>
<li><strong>selectedIndex</strong> - 获取当前展开的accordion面板的索引;</li>
</ul>
<p>示例中所使用的客户端行为列表:</p>
<ul>
<li><strong>add(header, content)</strong> - 在一个accordion的结尾添加一个新的accordion面板;</li>
<li><strong>insert(index, header, content) </strong>- 在指定的索引位置插入accordion面板;</li>
<li><strong>count() </strong>- 计算accordion面板的数目;</li>
<li><strong>removeAt(index) </strong>- 通过索引移除accordion面板;</li>
<li><strong>clear() </strong>- 移除所有的accordion面板。</li>
</ul>
<p>
 <strong>OnClientSelectedIndexChanged</strong> 属性用来监听客户端的
    <strong>selectedIndexChanged</strong> 事件:
<pre class="controldescription-code">
&lt;C1Accordion:C1Accordion runat="server" 
		ID="C1Accordion1" 		
		OnClientSelectedIndexChanged="onClientSelectedIndexChanged"&gt;
.....
&lt;/C1Accordion:C1Accordion&gt;
&lt;script language="javascript" type="text/javascript"&gt;
	function onClientSelectedIndexChanged(ev, args) {
		log.message("The new selectedIndex value is " + args.newIndex);
	}
&lt;/script&gt;
</pre>

</p>
<p>&nbsp;</p>
下面的代码展示如何用客户端脚本添加一个新的accordion面板:
<pre class="controldescription-code">
$("#&lt;%=C1Accordion1.ClientID%&gt;").c1accordion("add", "my header", "my content");
</pre>
<p>&nbsp;</p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
<p>
选择面板: <input type="text" id="selectedIndexInput" style="width:30px;" onclick="return false;" />
<input type="button" value="申请" onclick="applySelectedIndex(); return false;"/>
</p>
<p>
 <label>打开单个面板 <input type="checkbox" id="requireOpenedPaneCheckBox" /> </label>
</p>
<p>
	<input type="button" value="添加面板" onclick="addNewPane(); return false;"/>
	&nbsp;	
	<input type="button" value="插入面板" onclick="insertNewPane(); return false;"/>
	&nbsp;
	<input type="button" value="面板数目" onclick="showPanesCount(); return false;"/>
	&nbsp;
	<input type="button" value="清空面板" onclick="$('#<%=C1Accordion1.ClientID%>').c1accordion('clear'); return false;"/>
</p>
<p>
	<input type="text" id="paneIndexToRemove" value="0" />
	<input type="button" value="删除指定面板" onclick="removePaneByIndex(); return false;"/>
</p>

<script language="javascript" type="text/javascript">
	function onClientSelectedIndexChanged(ev, args) {
		log.message("Event selectedIndexChanged fired. New selectedIndex value is " + args.newIndex);
	}
	var _dynPanesCount = 0;
	function addNewPane() {
		$("#<%=C1Accordion1.ClientID%>").c1accordion("add", "标题 " + ++_dynPanesCount, "内容 " + _dynPanesCount);
	}
	function insertNewPane() {
		$("#<%=C1Accordion1.ClientID%>").c1accordion("insert", 0, "标题 " + ++_dynPanesCount, "内容 " + _dynPanesCount);
	}
	function showPanesCount() {
		alert($("#<%=C1Accordion1.ClientID%>").c1accordion("count"));
	}
	function removePaneByIndex() {
		var index = parseInt($("#paneIndexToRemove").val(), 10);
		if ((index || index === 0) && index >= 0 && index < $("#<%=C1Accordion1.ClientID%>").c1accordion("count")) {
			$("#<%=C1Accordion1.ClientID%>").c1accordion("removeAt", index);
			log.message("Accordion 面板 " + index + " 已移除");
		} else {
			alert("不正确的面板索引: " + $("#paneIndexToRemove").val());
		}
	}
	$(document).ready(function () {

		$("#requireOpenedPaneCheckBox")[0].checked = $("#<%=C1Accordion1.ClientID%>").c1accordion("option", "requireOpenedPane");
		$("#selectedIndexInput").val($("#<%=C1Accordion1.ClientID%>").c1accordion("option", "selectedIndex"));

		$("#requireOpenedPaneCheckBox").bind("change", function () {
			var requireOpenedPane = $("#requireOpenedPaneCheckBox")[0].checked;
			$("#<%=C1Accordion1.ClientID%>").c1accordion("option", "requireOpenedPane", requireOpenedPane);
			log.message("Property requireOpenedPane changed to " + requireOpenedPane);
		});
	});


	function applySelectedIndex() {
		var index = parseInt($("#selectedIndexInput").val(), 10);
		if ((index || index === 0) && index >= 0 && index < $("#<%=C1Accordion1.ClientID%>").c1accordion("count")) {
			$("#<%=C1Accordion1.ClientID%>").c1accordion("option", "selectedIndex", index);
			log.message("Property selectedIndex changed to " + index + "");
		} else {
			alert("Incorrect index: " + $("#selectedIndexInput").val());
		}
	}
</script>
</asp:Content>
